<template>
  <div class="dashboard">
    <div class="header">
      <div class="card-info">
        卡号：{{ userInfo ? userInfo.cardno : '' }}
        <a class="logout" @click="handleLogout">退出登录</a>
      </div>
    </div>
    <div class="main-content">
      <div class="menu">
        <div class="menu-item" @click="$router.push('/balance')">查询余额</div>
        <div class="menu-item" @click="$router.push('/transfer')">转账</div>
        <div class="menu-item" @click="$router.push('/transactions')">查询交易记录</div>
        <div class="menu-item" @click="$router.push('/change-password')">修改密码</div>
      </div>
      <div class="content">
        <h1>欢迎使用个人网上银行</h1>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  },
  created() {
    if (!this.$store.state.token) {
      this.$router.push('/login')
    }
  },
  methods: {
    async handleLogout() {
      try {
        const token = this.$store.state.token;
        const res = await this.$axios({
          method: 'post',
          url: '/bank/logout',
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (res.data.code === 0) {
          this.$message.success('退出登录成功');
        } else {
          this.$message.warning('退出登录失败');
        }

        // 清除前端存储的信息并跳转
        this.$store.commit('clearUserInfo');
        this.$router.push('/login');
      } catch (error) {
        console.error('退出登录失败:', error);
        this.$message.error('退出登录失败，请重试');

        // 即使请求失败也清除前端信息并跳转
        this.$store.commit('clearUserInfo');
        this.$router.push('/login');
      }
    }
  }
}
</script>

<style scoped>
/* 添加在每个组件的 style 标签内的开头 */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input, 
button, 
select, 
textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: pointer;
}

input, 
textarea {
    cursor: text;
}
.dashboard {
    min-height: 100vh;
    background: #f5f7fa;
}

.header {
    background: white;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-info {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #2c3e50;
}

.logout {
    color: #409EFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout:hover {
    color: #66b1ff;
    text-decoration: none;
}

.main-content {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    gap: 20px;
    padding: 0 20px;
}

.menu {
    width: 250px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.menu-item {
    padding: 15px 20px;
    margin: 5px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2c3e50;
}

.menu-item:hover {
    background: #f0f7ff;
    color: #409EFF;
    transform: translateX(5px);
}

.content {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.content h1 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 30px;
}
</style>